DP World Frontend Interview Experience | Refused Offer

Coding Challenge

Flatten a nested JavaScript object into a key-value pair format.

Solution

let user = {
    name: 'John',
    address: {
        country: 'India',
        state: 'India',
        education: {
            school: "APS",
            year: 2021
        }
    }
};

function flattenObject(obj = {}, parentKey = '') {
    return Object.keys(obj).reduce((acc, key) => {
        let updatedKey = parentKey ? `${parentKey}.${key}` : key;
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            Object.assign(acc, flattenObject(obj[key], updatedKey));
        } else {
            acc[updatedKey] = obj[key];
        }
        return acc;
    }, {});
}

let result = flattenObject(user, 'user');
console.log(result);

Output

{
  'user.name': 'John',
  'user.address.country': 'India',
  'user.address.state': 'India',
  'user.address.education.school': 'APS',
  'user.address.education.year': 2021
}

Other Question Asked

• Build a Progress Bar component with Start, Stop, Pause, and Reset buttons.
• Closures in JavaScript — Why are they useful?
• Is JavaScript single-threaded? How does it behave in the browser?
• Features other languages have but JavaScript lacks.

Key Questions

• React Version & New Hooks — Which version do you use, and what new hooks were introduced?
• Problem Solving: React re-render issue with useEffect, solved using the key prop.
• Machine Coding: Implement a Breadcrumb Component for nested objects (similar to a Folder Structure).
• SSR vs CSR: How does Server-Side Rendering (SSR) impact performance?
• Performance Optimization: React re-renders, caching, memory management.
• Async vs Defer: How do they affect script loading and execution?

System Design - Button Component

const VARIANT = {
    PRIMARY: 'PRIMARY',
    SECONDARY: 'SECONDARY'
};

const Button = ({ 
  text = '', 
  onClickHandler = () => {}, 
  isLoading = false, 
  isDisabled = false, 
  variant = VARIANT.PRIMARY 
}) => {

    return (
        <button
            className={`button ${variant}`}
            disabled={isDisabled || isLoading}
            onClick={onClickHandler}
        >
            {text}
        </button>
    );
};

CSS Styles

.button.PRIMARY {
    color: black;
    background: white;
}
.button.SECONDARY {
    color: white;
    background: black;
}

Other Questions

• URL Shortener Design: How does frontend handle redirections (301, 404)?
• Performance Metrics: CLS, LCP, async-defer handling.
• Handling Disagreements: What if your manager doesn’t agree with you?
• Team Conflicts: Have you had any in past roles? How did you resolve them?
• Why DP World? Why Leaving Cars24?